<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>麦克风SDK自定义UI示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    h1 {
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    
    .container {
      margin-top: 20px;
    }
    
    .section {
      margin-bottom: 30px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    
    .section h2 {
      margin-top: 0;
      font-size: 1.2em;
      color: #444;
    }
    
    .custom-ui {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fff;
    }
    
    .custom-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .custom-button:hover {
      background-color: #0b7dda;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .custom-button.active {
      background-color: #f44336;
    }
    
    .custom-button .icon {
      margin-right: 8px;
      font-size: 1.2em;
    }
    
    .custom-meter {
      height: 30px;
      background-color: #f5f5f5;
      border-radius: 15px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    }
    
    .custom-meter-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #4CAF50, #FFEB3B, #F44336);
      transition: width 0.1s ease-out;
      border-radius: 15px;
    }
    
    .custom-meter-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-weight: bold;
      text-shadow: 0 0 2px #fff;
    }
    
    .custom-selector {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .custom-selector select {
      flex-grow: 1;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
    }
    
    .custom-selector button {
      padding: 8px 12px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .custom-status {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 5px;
    }
    
    .custom-status-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .custom-indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #ccc;
    }
    
    .custom-indicator.active {
      background-color: #4CAF50;
    }
    
    .code-example {
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      font-family: monospace;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>麦克风SDK自定义UI示例</h1>
  
  <div class="container">
    <div class="section">
      <h2>自定义UI演示</h2>
      <p>这个示例展示了如何使用SDK API创建完全自定义的UI界面。</p>
      
      <div class="custom-ui" id="custom-ui">
        <!-- 自定义麦克风按钮 -->
        <div>
          <button id="mic-button" class="custom-button">
            <span class="icon">🎤</span>
            <span id="mic-text">开始录音</span>
          </button>
        </div>
        
        <!-- 自定义音频电平指示器 -->
        <div class="custom-meter">
          <div id="meter-bar" class="custom-meter-bar"></div>
          <div id="meter-text" class="custom-meter-text">0%</div>
        </div>
        
        <!-- 自定义麦克风选择器 -->
        <div class="custom-selector">
          <label>麦克风:</label>
          <select id="mic-select"></select>
          <button id="refresh-button">刷新</button>
        </div>
        
        <!-- 自定义状态指示器 -->
        <div class="custom-status">
          <div class="custom-status-item">
            <div id="listening-indicator" class="custom-indicator"></div>
            <span id="listening-status">麦克风未启动</span>
          </div>
          <div class="custom-status-item">
            <div id="permission-indicator" class="custom-indicator"></div>
            <span id="permission-status">权限状态未知</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="section">
      <h2>自定义UI代码示例</h2>
      <div class="code-example">
        <pre>
// 导入SDK
import MicrophoneSDK from '../MicrophoneSDK.js';

// 初始化SDK
await MicrophoneSDK.initialize();

// 麦克风按钮点击事件
document.getElementById('mic-button').addEventListener('click', async () => {
  const status = MicrophoneSDK.getMicrophoneStatus();
  
  if (status.isListening) {
    await MicrophoneSDK.stopListening();
  } else {
    await MicrophoneSDK.startListening();
  }
});

// 监听麦克风状态变化
MicrophoneSDK.onMicrophoneStatusChange(status => {
  // 更新按钮状态
  const button = document.getElementById('mic-button');
  const text = document.getElementById('mic-text');
  
  if (status.isListening) {
    button.classList.add('active');
    text.textContent = '停止录音';
  } else {
    button.classList.remove('active');
    text.textContent = '开始录音';
  }
  
  // 更新状态指示器
  updateStatusIndicators(status);
});

// 监听音频电平变化
MicrophoneSDK.onAudioLevelChange(level => {
  // 更新电平指示器
  const bar = document.getElementById('meter-bar');
  const text = document.getElementById('meter-text');
  
  const percentage = Math.round(level * 100);
  bar.style.width = `${percentage}%`;
  text.textContent = `${percentage}%`;
});

// 刷新麦克风列表
document.getElementById('refresh-button').addEventListener('click', async () => {
  await MicrophoneSDK.refreshMicrophoneList();
});

// 监听麦克风列表变化
MicrophoneSDK.onMicrophoneListChange(() => {
  updateMicrophoneList();
});

// 麦克风选择变化
document.getElementById('mic-select').addEventListener('change', async (e) => {
  const deviceId = e.target.value;
  await MicrophoneSDK.selectMicrophone(deviceId);
});

// 更新麦克风列表
function updateMicrophoneList() {
  const select = document.getElementById('mic-select');
  select.innerHTML = '';
  
  const microphones = MicrophoneSDK.getAvailableMicrophones();
  
  if (microphones.length === 0) {
    const option = document.createElement('option');
    option.textContent = '未找到麦克风设备';
    option.disabled = true;
    select.appendChild(option);
    return;
  }
  
  microphones.forEach(mic => {
    const option = document.createElement('option');
    option.value = mic.deviceId;
    option.textContent = mic.label || `麦克风 (${mic.deviceId.substr(0, 5)}...)`;
    select.appendChild(option);
    
    const status = MicrophoneSDK.getMicrophoneStatus();
    if (status.selectedMicrophone && status.selectedMicrophone.deviceId === mic.deviceId) {
      option.selected = true;
    }
  });
}

// 更新状态指示器
function updateStatusIndicators(status) {
  // 更新监听状态
  const listeningIndicator = document.getElementById('listening-indicator');
  const listeningStatus = document.getElementById('listening-status');
  
  if (status.isListening) {
    listeningIndicator.classList.add('active');
    listeningStatus.textContent = '麦克风已启动';
  } else {
    listeningIndicator.classList.remove('active');
    listeningStatus.textContent = '麦克风未启动';
  }
  
  // 更新权限状态
  const permissionIndicator = document.getElementById('permission-indicator');
  const permissionStatus = document.getElementById('permission-status');
  
  if (status.hasPermission === true) {
    permissionIndicator.classList.add('active');
    permissionStatus.textContent = '已获得麦克风权限';
  } else if (status.hasPermission === false) {
    permissionIndicator.classList.remove('active');
    permissionStatus.textContent = '麦克风权限被拒绝';
  } else {
    permissionIndicator.classList.remove('active');
    permissionStatus.textContent = '权限状态未知';
  }
}
        </pre>
      </div>
    </div>
  </div>
  
  <script type="module">
    // 导入SDK
    import MicrophoneSDK from '../MicrophoneSDK.js';
    
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', async () => {
      // 初始化SDK
      await MicrophoneSDK.initialize();
      
      // 麦克风按钮点击事件
      document.getElementById('mic-button').addEventListener('click', async () => {
        const status = MicrophoneSDK.getMicrophoneStatus();
        
        if (status.isListening) {
          await MicrophoneSDK.stopListening();
        } else {
          await MicrophoneSDK.startListening();
        }
      });
      
      // 监听麦克风状态变化
      MicrophoneSDK.onMicrophoneStatusChange(status => {
        // 更新按钮状态
        const button = document.getElementById('mic-button');
        const text = document.getElementById('mic-text');
        
        if (status.isListening) {
          button.classList.add('active');
          text.textContent = '停止录音';
        } else {
          button.classList.remove('active');
          text.textContent = '开始录音';
        }
        
        // 更新状态指示器
        updateStatusIndicators(status);
      });
      
      // 监听音频电平变化
      MicrophoneSDK.onAudioLevelChange(level => {
        // 更新电平指示器
        const bar = document.getElementById('meter-bar');
        const text = document.getElementById('meter-text');
        
        const percentage = Math.round(level * 100);
        bar.style.width = `${percentage}%`;
        text.textContent = `${percentage}%`;
      });
      
      // 刷新麦克风列表
      document.getElementById('refresh-button').addEventListener('click', async () => {
        await MicrophoneSDK.refreshMicrophoneList();
      });
      
      // 监听麦克风列表变化
      MicrophoneSDK.onMicrophoneListChange(() => {
        updateMicrophoneList();
      });
      
      // 麦克风选择变化
      document.getElementById('mic-select').addEventListener('change', async (e) => {
        const deviceId = e.target.value;
        await MicrophoneSDK.selectMicrophone(deviceId);
      });
      
      // 初始化麦克风列表
      updateMicrophoneList();
      
      // 初始化状态指示器
      updateStatusIndicators(MicrophoneSDK.getMicrophoneStatus());
    });
    
    // 更新麦克风列表
    function updateMicrophoneList() {
      const select = document.getElementById('mic-select');
      select.innerHTML = '';
      
      const microphones = MicrophoneSDK.getAvailableMicrophones();
      
      if (microphones.length === 0) {
        const option = document.createElement('option');
        option.textContent = '未找到麦克风设备';
        option.disabled = true;
        select.appendChild(option);
        return;
      }
      
      microphones.forEach(mic => {
        const option = document.createElement('option');
        option.value = mic.deviceId;
        option.textContent = mic.label || `麦克风 (${mic.deviceId.substr(0, 5)}...)`;
        select.appendChild(option);
        
        const status = MicrophoneSDK.getMicrophoneStatus();
        if (status.selectedMicrophone && status.selectedMicrophone.deviceId === mic.deviceId) {
          option.selected = true;
        }
      });
    }
    
    // 更新状态指示器
    function updateStatusIndicators(status) {
      // 更新监听状态
      const listeningIndicator = document.getElementById('listening-indicator');
      const listeningStatus = document.getElementById('listening-status');
      
      if (status.isListening) {
        listeningIndicator.classList.add('active');
        listeningStatus.textContent = '麦克风已启动';
      } else {
        listeningIndicator.classList.remove('active');
        listeningStatus.textContent = '麦克风未启动';
      }
      
      // 更新权限状态
      const permissionIndicator = document.getElementById('permission-indicator');
      const permissionStatus = document.getElementById('permission-status');
      
      if (status.hasPermission === true) {
        permissionIndicator.classList.add('active');
        permissionStatus.textContent = '已获得麦克风权限';
      } else if (status.hasPermission === false) {
        permissionIndicator.classList.remove('active');
        permissionStatus.textContent = '麦克风权限被拒绝';
      } else {
        permissionIndicator.classList.remove('active');
        permissionStatus.textContent = '权限状态未知';
      }
    }
  </script>
</body>
</html> 